import React from 'react';
import createG2 from 'g2-react';


class ChartOfFood extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    const Chart = createG2((chart) => {
      chart.col('value', {
        min: 0,
        max: 100,
        tickCount: 2
      });
      chart.coord('polar', {
        startAngle: 0,
        endAngle: 2 * Math.PI,
      });
      chart.legend('obj', { // 配置具体字段对应的图例属性
        title: null,
        position: 'bottom',
      });
      chart.axis('item', { // 设置坐标系栅格样式
        line: null,
        labels: {
          autoRotate: false, // 文本是否允许自动旋转
          label: {
            fill: '#ffffff', // 文本的颜色
            fontSize: '18', // 文本大小
            rotate: 0, // 文本旋转角度
          }
        },
        grid: {
          line: {
            stroke: '#00D9FF',
            lineDash: [0, 0]
          }
        }
      });
      chart.axis('value', { // 设置坐标系栅格样式
        grid: {
          type: 'polygon',
          line: {
            stroke: '#00D9FF',
            lineDash: [0, 0]
          }
        },
        labels: null,
        line: null,
        tickLine: null
      });
      chart.line().position('item*value').color('obj', ['#06FFC0']);
      chart.point().position('item*value').color('obj', ['#06FFC0']).shape('circle');
      chart.area().position('item*value').color('obj', ['rgba(6,255,192,0.30)']);
      chart.legend(false);
      chart.render();
    });
    return (
      <div>
        <Chart
          data={this.props.data}
          width={500}
          height={500}
          forceFit
        />
      </div>
    );
  }
}

export default ChartOfFood;
